<style>
    .laytable-cell-1-0-1 {
        height: auto;
    }
</style>
<script id="toolbarDemo" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加商品</button>

    </div>
</script>
<table id="demo" lay-filter="test"></table>

<script id="barDemo" type="text/html">
    <a class="layui-btn layui-btn-xs " lay-event="modify">修改</a>
    <a class="layui-btn layui-btn-xs  layui-btn-danger" lay-event="del">删除</a>
</script>

<script>


    var myTable, table, form;
    layui.use(['form', 'table', 'laydate', 'okLayer'], function () {
        table = layui.table;
        form = layui.form;
        let $ = layui.$;
        var okLayer = layui.okLayer;

        function formatDate(now) {
            if (now === "0") {
                return "无";
            }

            now = new Date(now * 1000);
            return now.getFullYear()
                + "-" + (now.getMonth() > 8 ? (now.getMonth() + 1) : "0" + (now.getMonth() + 1))
                + "-" + (now.getDate() > 9 ? now.getDate() : "0" + now.getDate())
                + " " + (now.getHours() > 9 ? now.getHours() : "0" + now.getHours())
                + ":" + (now.getMinutes() > 9 ? now.getMinutes() : "0" + now.getMinutes())
                + ":" + (now.getSeconds() > 9 ? now.getSeconds() : "0" + now.getSeconds());

        }

        //第一个实例
        myTable = table.render({
            elem: '#demo'
            , height: 'full-100'
            , url: "<{url('admin/api','GetGood')}>"
            , toolbar: '#toolbarDemo'

            , cols: [[ //表头
                {field: 'id', title: 'ID', maxWidth: 40},
                {field: 'name', title: '商品名称', minWidth: 120},
                {field: 'price', title: '单价', minWidth: 90},
                {field: 'msg', title: '邮件发送内容', minWidth: 100, align: 'center'},
                {title: '操作', minWidth: 180, align: 'center', toolbar: '#barDemo'}

            ]]
            , page: true
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'del') {
                layer.confirm('确定要删除商品吗？', function (index) {
                    layer.msg('操作中', {
                        icon: 16, shade: 0.01
                    });

                    $.post("<{url('admin/api','delGood')}>", "id=" + data.id, function (data) {
                        data = JSON.parse(data);
                        if (data.code === Api_Ok) {

                            layer.msg("操作成功！");
                            myTable.reload();
                        } else {
                            layer.msg(data.msg);
                        }


                    });
                    
                });
            }else if(layEvent === 'modify'){
                okLayer.open("修改商品 - "+data.name, "<{url c='admin/main' a='goodedit' }>?id="+data.id, "100%", "100%", null, function (){
                    myTable.reload();
                });
            }
        });

        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            switch (obj.event) {
                case 'add':
                    okLayer.open("添加商品", "<{url c='admin/main' a='goodedit' }>", "100%", "100%", null, function () {
                        myTable.reload();
                    });

                    break;
            }
        });

        form.render();

    });


</script>
